<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="max">
        <header class="iconfont">
            <span>&#xe603;</span>
            <h3>周杰伦</h3>
            <span>&#xec1c;</span>
        </header>
        <ul class="vx_main">
            <li class="wite">
                <a href="javascript">
                    <img src="./img/u=390829681,3002818272&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="">
                </a>

                <p>有新的工作安排你做,有新的工作安排你做,有新的工作安排你做,有新的工作安排你做,V,有新的工作安排你做,有新的工作安排你做,有新的工作安排你做</p>
            </li>
            <li class="wite">
                <a href="javascript">
                    <img src="./img/u=390829681,3002818272&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="">
                </a>

                <p>有新的工作安排你做</p>
            </li>
            <li class="wite">
                <a href="javascript">
                    <img src="./img/u=390829681,3002818272&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="">
                </a>

                <p>有新的工作安排你做,有新的工作安排你做,有新的工作安排你做,有新的工作安排你做,V,有新的工作安排你做,有新的工作安排你做,有新的工作安排你做</p>
            </li>
            <li class="wite jree">
                <a href="javascript">
                    <img src="./img/u=1960292808,1761809160&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="">
                </a>

                <p>好的</p>
            </li>
            <li class="wite jree">
                <a href="javascript">
                    <img src="./img/u=1960292808,1761809160&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="">
                </a>

                <p>明天发</p>
            </li>
        </ul>

        <!-- 底部 -->
        <footer class="iconfont">
            <span>&#xe618;</span>
            <textarea name="" id="" cols="30" rows="2"></textarea>
            <a href="JavaScript:;" class="fasong">发送</a>
        </footer>
    </div>
    <!-- <audio controls="" autoplay="" name="media" muted controls autoplay>
        <source src="https://api.vvhan.com/api/song.php?txt=sss" type="audio/mpeg">
    </audio> -->
</body>

</html>
<script src="./js/jquery-3.6.1.min.js"></script>
<script>
    var fasong = document.querySelector(".fasong");
    var uls = document.querySelector("ul");
    //时间函数
    function time() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var r = date.getDate();
        var day = date.getDay();
        var days = " ";
        switch (day) {
            case 1:
                days = "星期一";
                break;
            case 2:
                days = "星期二";
                break;
            case 3:
                days = "星期三";
                break;
            case 4:
                days = "星期四";
                break;
            case 5:
                days = "星期五";
                break;
            case 6:
                days = "星期六";
                break;
            case 0:
                days = "星期天";
                break;
        }
        var hous = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (hous < 10) {
            hous = "0" + hous;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        var times = year + "年" + month + "月" + r + "日" + hous + ":" + minutes + ":" + seconds + " " + days;
        return times;
    }

    var index = 0;
    fasong.onclick = function () {
        var val = document.querySelector("textarea").value;
        document.querySelector("textarea").value = "";
        if (val == "" || val == null) {

        } else {
            index++;
            // 添加时间
            var lis1 = document.createElement("li");
            var p2 = document.createElement("p");
            lis1.setAttribute("class", "wite center");
            p2.innerText = time();
            lis1.appendChild(p2);
            uls.appendChild(lis1);
            //输入内容
            var lis = document.createElement("li");//创建li元素
            var p1 = document.createElement("p");
            lis.setAttribute("id", "aa" + index);
            lis.setAttribute("class", "wite jree");
            var as = document.createElement("a");
            as.setAttribute("href", "javascript:;");
            var imgs = document.createElement("img");
            imgs.src = "./img/u=1960292808,1761809160&fm=253&fmt=auto&app=138&f=JPEG.webp";
            p1.innerText = val;
            as.appendChild(imgs);
            lis.appendChild(as);
            lis.appendChild(p1);
            uls.appendChild(lis);
            this.setAttribute("href", "#aa" + index);
            getMsg(val);

        }
    }
    $('textarea').on('keyup', function (e) {
        var val = document.querySelector("textarea").value;
        if (val == "" || val == null) {

        } else if (e.keyCode == 13 || e.keyCode == 108) {
            $("textarea").val('');

            index++;
            // 添加时间
            var lis1 = document.createElement("li");
            var p2 = document.createElement("p");
            lis1.setAttribute("class", "wite center");
            p2.innerText = time();
            lis1.appendChild(p2);
            uls.appendChild(lis1);
            //输入内容
            var lis = document.createElement("li");//创建li元素
            var p1 = document.createElement("p");
            lis.setAttribute("id", "aa" + index);
            lis.setAttribute("class", "wite jree");
            var as = document.createElement("a");
            as.setAttribute("href", "javascript:;");
            var imgs = document.createElement("img");
            imgs.src = "./img/u=1960292808,1761809160&fm=253&fmt=auto&app=138&f=JPEG.webp";
            p1.innerText = val;
            as.appendChild(imgs);
            lis.appendChild(as);
            lis.appendChild(p1);
            uls.appendChild(lis);
            this.setAttribute("href", "#aa" + index);
            getMsg(val);
        }
    })
    function getMsg(text) {
        $.ajax({
            method: 'GET',
            url: ' http://www.liulongbin.top:3006/api/robot',
            data: {
                spoken: text
            },
            success: function (res) {
                // console.log(res)
                if (res.message === 'success') {
                    // 接收聊天消息
                    var msg = res.data.info.text
                    $('.vx_main').append('<li class="wite"><a href="javascript"><img src="./img/u=390829681,3002818272&fm=253&fmt=auto&app=138&f=JPEG.webp" alt=""></a><p>' + msg + '</p></li > ');
                    $('.vx_main').append('<li class="wite"><video controls="" autoplay="" name="media" style="display: none;"><source src = "https://api.vvhan.com/api/song.php?txt=' + msg + '" type = "audio/mpeg" ></video ></li > ');
                }
            }
        })
    }
</script>